<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/jquery-3.2.1.js"></script>
    <!-- 导入swiper -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <!-- 导入iconfont -->
    <script src="https://at.alicdn.com/t/font_2206431_sunf4wjtzns.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2206431_sunf4wjtzns.css">
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="body">
        <div class="nav">
            <div>
                <p class="position">
                    <a href="javascript:void(0)">
                        武汉 <i class="iconfont icon-xiala"></i>
                    </a>
                </p>
                <p class="temperature">多云 22°c</p>
            </div>
            <div class="nav-input">
                <button></button>
                <input type="text" placeholder="金刚川（热门电影）">
            </div>
            <div>
                <i class="iconfont icon-yuyin"></i>
            </div>
            <div>
                <i class="iconfont icon-jia"></i>
            </div>
        </div>
        <div class="nav-tool">
            <div class="nav-tool-body">
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-saoma"></i>
                        <p>扫一扫</p>
                    </a>
                </div>
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-qr-egress"></i>
                        <p>付款码</p>
                    </a>
                </div>
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-qiaquan"></i>
                        <p>红包/卡券</p>
                    </a>
                </div>
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-qiche1"></i>
                        <p>骑车</p>
                    </a>
                </div>
                
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-waimai"></use>
                            </svg>
                            <p>外卖</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fenzu"></use>
                            </svg>
                            <p>美食</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiudian"></use>
                            </svg>
                            <p>酒店</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiuxian"></use>
                            </svg>
                            <p>休闲</p>
                        </a>
                    </div><div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianying"></use>
                            </svg>
                            <p>电影</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-car"></use>
                            </svg>
                            <p>打车</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-youpinwangtubiao-"></use>
                            </svg>
                            <p>药店</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-meirong"></use>
                            </svg>
                            <p>医学美容</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chaoshi"></use>
                            </svg>
                            <p>超市</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jingdian"></use>
                            </svg>
                            <p>景点</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huzhu"></use>
                            </svg>
                            <p>互助</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xinyongqia"></use>
                            </svg>
                            <p>信用卡</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xuexi"></use>
                            </svg>
                            <p>学习</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-qinzi"></use>
                            </svg>
                            <p>亲子</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-ziyuanleixing-qichepiao"></use>
                            </svg>
                            <p>汽车票</p>
                        </a>
                    </div>
                </div>


                <div class="swiper-slide">
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tubiaoqietu_fuzhi_kouqiangyake"></use>
                            </svg>
                            <p>口腔牙科</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-game-current"></use>
                            </svg>
                            <p>电玩桌游</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huochepiaojipiao"></use>
                            </svg>
                            <p>火车票/机票</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-lirenmeirong"></use>
                            </svg>
                            <p>美容美发</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zuliaoanmo"></use>
                            </svg>
                            <p>足疗按摩</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yuechi"></use>
                            </svg>
                            <p>密室</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon-test"></use>
                            </svg>
                            <p>酒吧</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-lvyou"></use>
                            </svg>
                            <p>旅游</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-youxuan"></use>
                            </svg>
                            <p>美团优选</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xianjin"></use>
                            </svg>
                            <p>借钱</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuangxiu"></use>
                            </svg>
                            <p>装修</p>
                        </a>
                    </div><div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gongyi"></use>
                            </svg>
                            <p>公益</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zu"></use>
                            </svg>
                            <p>汗蒸足浴</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zu1"></use>
                            </svg>
                            <p>新奇体验</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fuli"></use>
                            </svg>
                            <p>福利</p>
                        </a>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-maikefeng"></use>
                            </svg>
                            <p>KTV</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiuxian"></use>
                            </svg>
                            <p>休闲</p>
                        </a>
                    </div><div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianying"></use>
                            </svg>
                            <p>电影</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chongzhizhongxin"></use>
                            </svg>
                            <p>充值中心</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jianshen"></use>
                            </svg>
                            <p>健身房</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jingdian"></use>
                            </svg>
                            <p>景点</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huzhu"></use>
                            </svg>
                            <p>互助</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shuiguo2"></use>
                            </svg>
                            <p>水果</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zuliaoanmo"></use>
                            </svg>
                            <p>足疗按摩</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yuechi"></use>
                            </svg>
                            <p>密室</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon-test"></use>
                            </svg>
                            <p>酒吧</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chongwu"></use>
                            </svg>
                            <p>宠物</p>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
    
        </div>
        <div class="for-student">
            <div class="for-student-title">
                <a href="javascript:void(0)"><i class="iconfont icon-ipad_icon_xuesheng"></i></a> 
                <p><a href="javascript:void(0)">学生专享</a></p>
                <p><a href="javascript:void(0)">狂享千万福利</a></p>
                <p><a href="javascript:void(0)">立刻领取></a></p>
            </div>
            <div class="for-student-list">
                <div class="for-student-list-body">
                    <a href="javascript:void(0)"><img src="images/炸鸡桶.jpg" alt=""></a>
                    <p><a href="javascript:void(0)">华莱士·全鸡汉堡韩式炸鸡桶</a></p>
                    <span><a href="javascript:void(0)">￥9</a></span>
                    <span><a href="javascript:void(0)">认证有券</a></span>
                </div>
                <div class="for-student-list-body">
                    <a href="javascript:void(0)"><img src="images/烧仙草.jpg" alt=""></a>
                    <p><a href="javascript:void(0)">华莱士·全鸡汉堡韩式炸鸡桶</a></p>
                    <span><a href="javascript:void(0)">￥9</a></span>
                    <span><a href="javascript:void(0)">认证有券</a></span>
                </div>
                <div class="for-student-list-body">
                    <a href="javascript:void(0)"><img src="images/蜜雪冰城.jpg" alt=""></a>
                    <p><a href="javascript:void(0)">华莱士·全鸡汉堡韩式炸鸡桶</a></p>
                    <span><a href="javascript:void(0)">￥9</a></span>
                    <span><a href="javascript:void(0)">认证有券</a></span>
                </div>
                
            </div>
        </div>

        <div class="guset-like-body">
            <div class="guset-like-top">
                <p><a href="javascript:void(0)" class="guset-like-top-get">猜你喜欢</a></p>
                <p><a href="javascript:void(0)">周边探店</a></p>
                <p><a href="javascript:void(0)">今日特价</a></p>
                <p><a href="javascript:void(0)">同城逛吃</a></p>
            </div>
            <div class="guset-like-main">
                <div class="for-student-list-body guset-like">
                    <a href="javascript:void(0)"><img src="images/甘蔗.jpg" alt=""></a>
                    <p><a href="javascript:void(0)" class="title">甘蔗2斤±0.2斤</a></p>
                    <p><a href="javascript:void(0)" class="detailed">甘甜多汁  一口嘎嘣脆</a></p>
                    <span><a href="javascript:void(0)" class="price">￥0.01</a></span>
                    <span><a href="javascript:void(0)" class="past-price">￥6.9</a></span>
                    <span><a href="javascript:void(0)">首单价</a></span>
                </div>
                <div class="for-student-list-body guset-like">
                    <a href="javascript:void(0)"><img src="images/炸鸡.jfif" alt=""></a>
                    <p><a href="javascript:void(0)" class="title">叫了个炸鸡  单人套餐A</a></p>
                    <p><a href="javascript:void(0)" class="detailed">很不错</a></p>
                    <span><a href="javascript:void(0)" class="price">￥10.9</a></span>
                    <span><a href="javascript:void(0)" class="past-price">￥35.8</a></span>
                    <span><a href="javascript:void(0)">3折</a></span>
                </div>
                <div class="for-student-list-body guset-like">
                    <a href="javascript:void(0)"><img src="images/橘子.jpg" alt=""></a>
                    <p><a href="javascript:void(0)" class="title">皇帝柑  500±50g/份</a></p>
                    <p><a href="javascript:void(0)" class="detailed">清甜多汁，果香四溢</a></p>
                    <span><a href="javascript:void(0)" class="price">￥0.99</a></span>
                    <span><a href="javascript:void(0)" class="past-price">￥5.9</a></span>
                    <span><a href="javascript:void(0)">首单价</a></span>
                </div>
                <div class="for-student-list-body guset-like">
                    <a href="javascript:void(0)"><img src="images/黄焖鸡米饭.jpg" alt=""></a>
                    <p><a href="javascript:void(0)" class="title">爱上黄焖鸡米饭·火锅鸡<br>特惠单人套餐</a></p>
                    <p><a href="javascript:void(0)" class="detailed">千张黄焖鸡、土豆黄焖鸡</a></p>
                    <span><a href="javascript:void(0)" class="price">￥8.8</a></span>
                    <span><a href="javascript:void(0)" class="past-price">￥24</a></span>
                    <span><a href="javascript:void(0)">3.7折</a></span>
                </div>
            </div>
            <div class="test"></div>
        </div>
        <div class="bottom-nav">
            <a href="javascript:void(0)">
                <div class="meituan .meituan-tuan">
                </div> 
            </a>
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-huo"></i>
                    <p>团好货</p>
                </a>
            </div>
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-xiaoxi"></i>
                    <p>消息</p>
                </a>
            </div>
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-wode1-copy-copy"></i>
                    <p>我的</p>
                </a>
            </div>
        </div>
        <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            })     


            $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop()
                    if(scrollTop>=500){
                        $(".meituan").removeClass("meituan-tuan")
                        $(".meituan").addClass("meituan-top")
                    }
                    else{
                        $(".meituan").removeClass("meituan-top")
                        $(".meituan").addClass("meituan-tuan")
                    }
                    console.log(scrollTop)   
            })
                $(".meituan").click(function(){
                    $("html").animate({scrollTop:"0"},1000)
                })


            $(".guset-like-top p").click(function(){
                $(".guset-like-top p a").removeClass("guset-like-top-get")
                $(this).children("a").addClass("guset-like-top-get")
            })

            // $(".bottom-nav .iconfont").click(function(){
            //     $(".bottom-nav .iconfont").removeClass("bottom-nav-get")
            //     $(this).addClass("bottom-nav-get")
            //     console.log("wwww")
            // })
            
        </script>
    </div>
    
</body>
</html>